Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್: ಜಾಗತಿಕ ವೆಬ್‌ಗಾಗಿ ಸುಧಾರಿತ ಆಪ್ಟಿಮೈಸೇಶನ್ ವೈಶಿಷ್ಟ್ಯಗಳು

ಇಂದಿನ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ಚಿತ್ರಗಳು ವೆಬ್‌ಸೈಟ್ ವಿಷಯದ ಒಂದು ಪ್ರಮುಖ ಭಾಗವಾಗಿದ್ದು, ಬಳಕೆದಾರರ ಅನುಭವ ಮತ್ತು ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಆಪ್ಟಿಮೈಜ್ ಮಾಡದ ಚಿತ್ರಗಳು ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಗಮನಾರ್ಹವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು, ಇದು ನಿಧಾನವಾದ ಲೋಡಿಂಗ್ ಸಮಯ ಮತ್ತು ಕಳಪೆ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಸೀಮಿತ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಅಥವಾ ಭೌಗೋಳಿಕವಾಗಿ ದೂರದ ಸ್ಥಳಗಳಿಂದ ಪ್ರವೇಶಿಸುವವರಿಗೆ. Next.js, ಒಂದು ಜನಪ್ರಿಯ ರಿಯಾಕ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್, ಈ ಸವಾಲುಗಳನ್ನು ಎದುರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಪ್ರಬಲವಾದ <Image> ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಸುಧಾರಿತ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಮೊದಲೇ ನೀಡುತ್ತದೆ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಸುಧಾರಿತ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ನಿಮ್ಮ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿದ ಚಿತ್ರಗಳನ್ನು ತಲುಪಿಸಲು ನೀವು ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ, ವೇಗವಾದ ಲೋಡಿಂಗ್ ಸಮಯ, ಕಡಿಮೆ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆ ಮತ್ತು ಒಟ್ಟಾರೆಯಾಗಿ ಸುಧಾರಿತ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ನಾವು ರೆಸ್ಪಾನ್ಸಿವ್ ಇಮೇಜ್ ಸೈಜಿಂಗ್ ಮತ್ತು ಫಾರ್ಮ್ಯಾಟ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನಿಂದ ಹಿಡಿದು ಲೇಜಿ ಲೋಡಿಂಗ್ ಮತ್ತು ಸುಧಾರಿತ ಕಾನ್ಫಿಗರೇಶನ್ ಆಯ್ಕೆಗಳವರೆಗೆ ವಿಷಯಗಳನ್ನು ಒಳಗೊಳ್ಳುತ್ತೇವೆ.

ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಮೊದಲು, Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್ ಬಳಸುವುದರ ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳನ್ನು ಪುನರಾವಲೋಕಿಸೋಣ:

• ಸ್ವಯಂಚಾಲಿತ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್: ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಆಧರಿಸಿ ಚಿತ್ರಗಳನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುತ್ತದೆ, ಮರುಗಾತ್ರಗೊಳಿಸುತ್ತದೆ ಮತ್ತು WebP ಅಥವಾ AVIF ನಂತಹ ಆಧುನಿಕ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ.
• ರೆಸ್ಪಾನ್ಸಿವ್ ಇಮೇಜ್‌ಗಳು: ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳು ಮತ್ತು ಸಾಧನದ ರೆಸಲ್ಯೂಶನ್‌ಗಳಿಗೆ ತಕ್ಕಂತೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬಹು ಇಮೇಜ್ ಗಾತ್ರಗಳನ್ನು ರಚಿಸುತ್ತದೆ, ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ಲೇಜಿ ಲೋಡಿಂಗ್: ಚಿತ್ರಗಳು ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಪ್ರವೇಶಿಸಿದಾಗ ಮಾತ್ರ ಅವುಗಳನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ, ಆರಂಭಿಕ ಪೇಜ್ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ಅಂತರ್ನಿರ್ಮಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ಅಬವ್-ದ-ಫೋಲ್ಡ್ ಚಿತ್ರಗಳ ಪ್ರಿಲೋಡಿಂಗ್ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಇಮೇಜ್ ಸೈಜಿಂಗ್‌ನಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾಗಿದೆ.
• ಲೇಔಟ್ ಶಿಫ್ಟ್ ತಡೆಯಿರಿ: width ಮತ್ತು height ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ, ಅಥವಾ fill ಪ್ರಾಪ್ ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, ಈ ಕಾಂಪೊನೆಂಟ್ ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್‌ಗಾಗಿ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್ ಆದ ಕ್ಯುಮುಲೇಟಿವ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ (CLS) ಅನ್ನು ತಡೆಯುತ್ತದೆ.

ಸುಧಾರಿತ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳು

1. ಹೊಂದಾಣಿಕೆಯ ಚಿತ್ರಗಳಿಗಾಗಿ `sizes` ಪ್ರಾಪ್ ಅನ್ನು ಬಳಸುವುದು

sizes ಪ್ರಾಪ್ ವಿವಿಧ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳು ಮತ್ತು ವ್ಯೂಪೋರ್ಟ್ ಅಗಲಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ನಿಜವಾದ ರೆಸ್ಪಾನ್ಸಿವ್ ಚಿತ್ರಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. ಇದು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳ ಆಧಾರದ ಮೇಲೆ ವಿಭಿನ್ನ ಇಮೇಜ್ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಬಳಕೆದಾರರ ಸಾಧನಕ್ಕೆ ಅತ್ಯಂತ ಸೂಕ್ತವಾದ ಚಿತ್ರವನ್ನು ಬ್ರೌಸರ್ ಲೋಡ್ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ:

ನೀವು ಒಂದು ಚಿತ್ರವನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ಅದು ಸಣ್ಣ ಸಾಧನಗಳಲ್ಲಿ ಸ್ಕ್ರೀನ್‌ನ ಪೂರ್ಣ ಅಗಲವನ್ನು, ಮಧ್ಯಮ ಗಾತ್ರದ ಸಾಧನಗಳಲ್ಲಿ ಅರ್ಧ ಅಗಲವನ್ನು, ಮತ್ತು ದೊಡ್ಡ ಸಾಧನಗಳಲ್ಲಿ ಮೂರನೇ ಒಂದು ಭಾಗದಷ್ಟು ಅಗಲವನ್ನು ಆಕ್ರಮಿಸಬೇಕು. ಇದನ್ನು ನೀವು sizes ಪ್ರಾಪ್ ಬಳಸಿ ಸಾಧಿಸಬಹುದು:

<Image
  src="/my-image.jpg"
  alt="My Responsive Image"
  width={1200}
  height={800}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

ವಿವರಣೆ:

• (max-width: 768px) 100vw: ಗರಿಷ್ಠ 768px ಅಗಲವಿರುವ ಸ್ಕ್ರೀನ್‌ಗಳಿಗಾಗಿ (ಸಾಮಾನ್ಯವಾಗಿ ಮೊಬೈಲ್ ಸಾಧನಗಳು), ಚಿತ್ರವು ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದ 100% ಅನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ.
• (max-width: 1200px) 50vw: ಗರಿಷ್ಠ 1200px ಅಗಲವಿರುವ ಸ್ಕ್ರೀನ್‌ಗಳಿಗಾಗಿ (ಮಧ್ಯಮ ಗಾತ್ರದ ಸಾಧನಗಳು), ಚಿತ್ರವು ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದ 50% ಅನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ.
• 33vw: 1200px ಗಿಂತ ದೊಡ್ಡದಾದ ಸ್ಕ್ರೀನ್‌ಗಳಿಗಾಗಿ, ಚಿತ್ರವು ವ್ಯೂಪೋರ್ಟ್ ಅಗಲದ 33% ಅನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ.

sizes ಪ್ರಾಪ್ width ಮತ್ತು height ಪ್ರಾಪ್‌ಗಳೊಂದಿಗೆ ಸೇರಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದರಿಂದ ಬ್ರೌಸರ್ ಸರಿಯಾದ ಇಮೇಜ್ ಗಾತ್ರವನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ sizes ಪ್ರಾಪ್ ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ನೀವು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧನಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗಾಗಿ ಇಮೇಜ್ ವಿತರಣೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಬಹುದು, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್: ಯುರೋಪ್ ಮತ್ತು ಏಷ್ಯಾ ಎರಡರಲ್ಲೂ ಬಳಕೆದಾರರನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿರುವ ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಸಾಧನ ಬಳಕೆಯ ಮಾದರಿಗಳು ಗಮನಾರ್ಹವಾಗಿ ಭಿನ್ನವಾಗಿರಬಹುದು. ಯುರೋಪಿಯನ್ ಬಳಕೆದಾರರು ಮುಖ್ಯವಾಗಿ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳನ್ನು ಬಳಸಬಹುದು, ಆದರೆ ಏಷ್ಯನ್ ಬಳಕೆದಾರರು ಮೊಬೈಲ್ ಸಾಧನಗಳನ್ನು ಹೆಚ್ಚು ಅವಲಂಬಿಸಿರಬಹುದು. sizes ನೊಂದಿಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದರಿಂದ ಎಲ್ಲರಿಗೂ, ಸಾಧನವನ್ನು ಲೆಕ್ಕಿಸದೆ, ವೇಗವಾದ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

2. ಪ್ರಮುಖ ಅಬವ್-ದ-ಫೋಲ್ಡ್ ಚಿತ್ರಗಳಿಗಾಗಿ `priority` ಬಳಸುವುದು

priority ಪ್ರಾಪ್ ಅನ್ನು ಆರಂಭಿಕ ಪೇಜ್ ಲೋಡ್‌ಗೆ ನಿರ್ಣಾಯಕವಾದ ಚಿತ್ರಗಳ ಲೋಡಿಂಗ್‌ಗೆ ಆದ್ಯತೆ ನೀಡಲು ಬಳಸಲಾಗುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಅಬವ್-ದ-ಫೋಲ್ಡ್ (ಸ್ಕ್ರೋಲ್ ಮಾಡದೆಯೇ ಗೋಚರಿಸುವ ಪುಟದ ಭಾಗ) ನಲ್ಲಿ ಕಾಣುವ ಚಿತ್ರಗಳು. ಈ ಚಿತ್ರಗಳ ಮೇಲೆ priority={true} ಎಂದು ಹೊಂದಿಸುವ ಮೂಲಕ, ನೀವು Next.js ಗೆ ಅವುಗಳನ್ನು ಪ್ರಿಲೋಡ್ ಮಾಡಲು ಸೂಚಿಸುತ್ತೀರಿ, ಇದರಿಂದ ಅವುಗಳು ತ್ವರಿತವಾಗಿ ಲೋಡ್ ಆಗಿ ಪ್ರದರ್ಶನಗೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಬಳಕೆದಾರರ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತವೆ.

ಉದಾಹರಣೆ:

<Image
  src="/hero-image.jpg"
  alt="Hero Image"
  width={1920}
  height={1080}
  priority={true}
/>

ಯಾವಾಗ ಬಳಸಬೇಕು:

• ಹೀರೋ ಚಿತ್ರಗಳು: ಪುಟದ ಮೇಲ್ಭಾಗದಲ್ಲಿರುವ ಮುಖ್ಯ ಚಿತ್ರ, ಇದು ತಕ್ಷಣವೇ ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಸೆಳೆಯುತ್ತದೆ.
• ಲೋಗೋಗಳು: ವೆಬ್‌ಸೈಟ್‌ನ ಲೋಗೋ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಹೆಡರ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ.
• ಪ್ರಮುಖ ದೃಶ್ಯ ಅಂಶಗಳು: ಆರಂಭಿಕ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಅಗತ್ಯವಾದ ಯಾವುದೇ ಇತರ ಚಿತ್ರಗಳು.

ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳು:

• priority ಪ್ರಾಪ್ ಅನ್ನು ಮಿತವಾಗಿ ಬಳಸಿ, ಏಕೆಂದರೆ ಹಲವಾರು ಚಿತ್ರಗಳನ್ನು ಪ್ರಿಲೋಡ್ ಮಾಡುವುದರಿಂದ ಒಟ್ಟಾರೆ ಪೇಜ್ ಲೋಡ್ ಸಮಯದ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು.
• ನೀವು ಆದ್ಯತೆ ನೀಡುವ ಚಿತ್ರಗಳು ಅವುಗಳ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸರಿಯಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್: ವಿಶ್ವಾದ್ಯಂತ ಓದುಗರನ್ನು ಹೊಂದಿರುವ ಸುದ್ದಿ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಮುಖಪುಟದಲ್ಲಿನ ಮುಖ್ಯ ಸುದ್ದಿ ಚಿತ್ರವು priority ನಿಂದ ಗಮನಾರ್ಹವಾಗಿ ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಅಭಿವೃದ್ಧಿಶೀಲ ರಾಷ್ಟ್ರಗಳಲ್ಲಿ ನಿಧಾನವಾದ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕ ಹೊಂದಿರುವ ಓದುಗರಿಗೆ. ಇದು ನಿರ್ಣಾಯಕ ದೃಶ್ಯ ಅಂಶವು ತ್ವರಿತವಾಗಿ ಲೋಡ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

3. ಕಸ್ಟಮ್ ಇಮೇಜ್ ಲೋಡರ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಅಂತರ್ನಿರ್ಮಿತ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಸೇವೆಯನ್ನು ಬಳಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನೀವು ಕಸ್ಟಮ್ ಇಮೇಜ್ ಲೋಡರ್ ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಈ ನಡವಳಿಕೆಯನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ನೀವು Cloudinary, Imgix, ಅಥವಾ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೊಂದಿರುವ ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್‌ವರ್ಕ್ (CDN) ನಂತಹ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಸೇವೆಯನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಉದಾಹರಣೆ: Cloudinary ಬಳಸುವುದು

ಮೊದಲು, Cloudinary SDK ಅನ್ನು ಸ್ಥಾಪಿಸಿ:

npm install cloudinary-core

ನಂತರ, ಕಸ್ಟಮ್ ಲೋಡರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ:

// utils/cloudinaryLoader.js
import { Cloudinary } from 'cloudinary-core';

const cloudinary = new Cloudinary({
  cloud_name: 'your_cloud_name',
});

export function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, 'q_auto'];
  if (quality) {
    params.push(`q_${quality}`);
  }
  return cloudinary.url(src, { transformation: params });
}

ಅಂತಿಮವಾಗಿ, ನಿಮ್ಮ next.config.js ಫೈಲ್‌ನಲ್ಲಿ loader ಪ್ರಾಪ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ:

// next.config.js

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './utils/cloudinaryLoader.js',
  },
}

ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಬಳಸಿ:

<Image
  src="/my-image.jpg"
  alt="My Image"
  width={600}
  height={400}
  loader={cloudinaryLoader}
/>

ಕಸ್ಟಮ್ ಲೋಡರ್ ಬಳಸುವುದರ ಪ್ರಯೋಜನಗಳು:

• ಹೊಂದಿಕೊಳ್ಳುವಿಕೆ: ನಿಮ್ಮ ಆದ್ಯತೆಯ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಸೇವೆಯೊಂದಿಗೆ ಸಂಯೋಜಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• ಸುಧಾರಿತ ಆಪ್ಟಿಮೈಸೇಶನ್: ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸೇವೆಗಳು ನೀಡುವ ಸುಧಾರಿತ ಆಪ್ಟಿಮೈಸೇಶನ್ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• CDN ಏಕೀಕರಣ: ನಿಮ್ಮ ಆಯ್ಕೆಮಾಡಿದ ಸೇವೆಯ ಜಾಗತಿಕ CDN ಮೂಲಸೌಕರ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್: ಜಾಗತಿಕ ಪ್ರಯಾಣ ಬುಕಿಂಗ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ Akamai ಅಥವಾ Cloudflare ನಂತಹ CDN ನೊಂದಿಗೆ ಕಸ್ಟಮ್ ಲೋಡರ್ ಅನ್ನು ಬಳಸಬಹುದು. ಇದು ಬಳಕೆದಾರರಿಗೆ ಹತ್ತಿರವಿರುವ ಸರ್ವರ್‌ಗಳಿಂದ ಚಿತ್ರಗಳನ್ನು ನೀಡಲಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಬಳಕೆದಾರರು ಟೋಕಿಯೋ, ಲಂಡನ್, ಅಥವಾ ನ್ಯೂಯಾರ್ಕ್‌ನಲ್ಲಿರಲಿ, ಲೇಟೆನ್ಸಿಯನ್ನು ತೀವ್ರವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

4. ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು: WebP ಮತ್ತು AVIF

WebP ಮತ್ತು AVIF ನಂತಹ ಆಧುನಿಕ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು JPEG ಮತ್ತು PNG ನಂತಹ ಸಾಂಪ್ರದಾಯಿಕ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಉತ್ತಮ ಸಂಕೋಚನ ಮತ್ತು ಗುಣಮಟ್ಟವನ್ನು ನೀಡುತ್ತವೆ. Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಆಧರಿಸಿ ಚಿತ್ರಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಈ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಬಹುದು, ಇದರಿಂದ ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ಮತ್ತಷ್ಟು ಕಡಿಮೆ ಮಾಡಬಹುದು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು.

WebP: Google ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಆಧುನಿಕ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್, ಇದು ಅತ್ಯುತ್ತಮ ನಷ್ಟರಹಿತ ಮತ್ತು ನಷ್ಟಯುಕ್ತ ಸಂಕೋಚನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದನ್ನು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿಸುತ್ತವೆ.

AVIF: AV1 ವೀಡಿಯೊ ಕೋಡೆಕ್ ಆಧಾರಿತ ಹೊಸ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್. ಇದು WebP ಗಿಂತಲೂ ಉತ್ತಮ ಸಂಕೋಚನವನ್ನು ನೀಡುತ್ತದೆ ಆದರೆ ಕಡಿಮೆ ವ್ಯಾಪಕವಾದ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ.

ಸ್ವಯಂಚಾಲಿತ ಫಾರ್ಮ್ಯಾಟ್ ಪರಿವರ್ತನೆ: ಬ್ರೌಸರ್ ಬೆಂಬಲಿಸಿದರೆ Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್ ಚಿತ್ರಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ WebP ಅಥವಾ AVIF ಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ. ನೀವು ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಅಗತ್ಯವಿಲ್ಲ; ಕಾಂಪೊನೆಂಟ್ ಅದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ: WebP ಮತ್ತು AVIF ಗಾಗಿ ಪ್ರಸ್ತುತ ಬೆಂಬಲವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, caniuse.com) ಪರಿಶೀಲಿಸಿ.

ಪರಿಗಣನೆಗಳು:

• ನಿಮ್ಮ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಸೇವೆ ಅಥವಾ CDN WebP ಮತ್ತು AVIF ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಈ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಒದಗಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ (Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್ ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ).

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್: ಅಂತರರಾಷ್ಟ್ರೀಯ ಸುದ್ದಿ ಸಂಗ್ರಾಹಕವು WebP ಮತ್ತು AVIF ನಿಂದ ಅಪಾರವಾಗಿ ಪ್ರಯೋಜನ ಪಡೆಯಬಹುದು. ವಿವಿಧ ಪ್ರದೇಶಗಳಲ್ಲಿ ವಿಭಿನ್ನ ಇಂಟರ್ನೆಟ್ ವೇಗಗಳೊಂದಿಗೆ, ಸಣ್ಣ ಇಮೇಜ್ ಫೈಲ್ ಗಾತ್ರಗಳು ಸೀಮಿತ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಇರುವ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ವೇಗವಾದ ಲೋಡಿಂಗ್ ಸಮಯ ಮತ್ತು ಕಡಿಮೆ ಡೇಟಾ ಬಳಕೆಗೆ ಕಾರಣವಾಗುತ್ತವೆ.

5. ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ `fill` ಮತ್ತು `objectFit` ಅನ್ನು ಬಳಸುವುದು

fill ಪ್ರಾಪ್ ಚಿತ್ರವು ಅದರ ಪೇರೆಂಟ್ ಕಂಟೇನರ್‌ನ ಆಯಾಮಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಅನುಮತಿಸುತ್ತದೆ. ಲಭ್ಯವಿರುವ ಸ್ಥಳಕ್ಕೆ ಇಮೇಜ್ ಗಾತ್ರವು ಡೈನಾಮಿಕ್ ಆಗಿ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. objectFit CSS ಪ್ರಾಪರ್ಟಿಯೊಂದಿಗೆ ಸೇರಿ, ಚಿತ್ರವು ಅದರ ಕಂಟೇನರ್ ಅನ್ನು ಹೇಗೆ ತುಂಬುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ನಿಯಂತ್ರಿಸಬಹುದು (ಉದಾಹರಣೆಗೆ, cover, contain, fill, none, scale-down).

ಉದಾಹರಣೆ:

<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image
    src="/my-image.jpg"
    alt="My Image"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

ವಿವರಣೆ:

• div ಎಲಿಮೆಂಟ್ ಚಿತ್ರಕ್ಕಾಗಿ ಕಂಟೇನರ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಸಾಪೇಕ್ಷ ಸ್ಥಾನವನ್ನು ಹೊಂದಿದೆ.
• <Image> ಕಾಂಪೊನೆಂಟ್ fill ಪ್ರಾಪ್ ಅನ್ನು ಹೊಂದಿದೆ, ಇದು ಅದರ ಪೇರೆಂಟ್ ಕಂಟೇನರ್‌ನ ಆಯಾಮಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ.
• objectFit: 'cover' ಶೈಲಿಯು ಚಿತ್ರವು ಸಂಪೂರ್ಣ ಕಂಟೇನರ್ ಅನ್ನು ಆವರಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಆಕಾರ ಅನುಪಾತವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಚಿತ್ರದ ಕೆಲವು ಭಾಗಗಳನ್ನು ಕ್ರಾಪ್ ಮಾಡಬಹುದು.

ಬಳಕೆಯ ಸಂದರ್ಭಗಳು:

• ಪೂರ್ಣ-ಅಗಲದ ಬ್ಯಾನರ್‌ಗಳು: ಸ್ಕ್ರೀನ್‌ನ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ವ್ಯಾಪಿಸುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಬ್ಯಾನರ್‌ಗಳನ್ನು ರಚಿಸುವುದು.
• ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು: ವಿಭಾಗಗಳು ಅಥವಾ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿಸುವುದು.
• ಇಮೇಜ್ ಗ್ಯಾಲರಿಗಳು: ಇಮೇಜ್ ಗಾತ್ರವು ಲಭ್ಯವಿರುವ ಸ್ಥಳಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುವ ಗ್ರಿಡ್ ಲೇಔಟ್‌ನಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದು.

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್: ಉತ್ಪನ್ನಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಬಹುಭಾಷಾ ವೆಬ್‌ಸೈಟ್‌ಗೆ ವಿಭಿನ್ನ ಪಠ್ಯ ಉದ್ದಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ ಅಗತ್ಯವಿದೆ. fill ಮತ್ತು objectFit ಅನ್ನು ಬಳಸುವುದರಿಂದ ಚಿತ್ರಗಳು ತಮ್ಮ ದೃಶ್ಯ ಆಕರ್ಷಣೆಯನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಭಾಷೆ ಅಥವಾ ಸಾಧನವನ್ನು ಲೆಕ್ಕಿಸದೆ ಲೇಔಟ್‌ಗೆ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ.

6. ನಿರ್ದಿಷ್ಟ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ `unoptimized` ಪ್ರಾಪ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು

ವಿರಳ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೀವು ನಿರ್ದಿಷ್ಟ ಚಿತ್ರಗಳಿಗಾಗಿ ಸ್ವಯಂಚಾಲಿತ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಬಯಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಈಗಾಗಲೇ ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾದ ಚಿತ್ರವನ್ನು ಹೊಂದಿರಬಹುದು ಅಥವಾ ಯಾವುದೇ ಹೆಚ್ಚಿನ ಪ್ರಕ್ರಿಯೆಯಿಲ್ಲದೆ ನೇರವಾಗಿ CDN ನಿಂದ ನೀಡಲು ಬಯಸಬಹುದು. unoptimized ಪ್ರಾಪ್ ಅನ್ನು true ಗೆ ಹೊಂದಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಸಾಧಿಸಬಹುದು.

ಉದಾಹರಣೆ:

<Image
  src="/already-optimized.png"
  alt="Already Optimized Image"
  width={800}
  height={600}
  unoptimized={true}
/>

ಯಾವಾಗ ಬಳಸಬೇಕು:

• ಈಗಾಗಲೇ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿದ ಚಿತ್ರಗಳು: ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಉಪಕರಣ ಅಥವಾ ಸೇವೆಯನ್ನು ಬಳಸಿ ಈಗಾಗಲೇ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾದ ಚಿತ್ರಗಳು.
• ನೇರವಾಗಿ CDN ನಿಂದ ನೀಡಲಾಗುವ ಚಿತ್ರಗಳು: ಯಾವುದೇ ಹೆಚ್ಚಿನ ಪ್ರಕ್ರಿಯೆಯಿಲ್ಲದೆ ನೇರವಾಗಿ CDN ನಿಂದ ನೀಡಲಾಗುವ ಚಿತ್ರಗಳು.
• ವಿಶೇಷ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು: Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ಬೆಂಬಲಿಸದ ವಿಶೇಷ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸುವ ಚಿತ್ರಗಳು.

ಎಚ್ಚರಿಕೆ:

• unoptimized ಪ್ರಾಪ್ ಅನ್ನು ಮಿತವಾಗಿ ಬಳಸಿ, ಏಕೆಂದರೆ ಇದು ಎಲ್ಲಾ ಸ್ವಯಂಚಾಲಿತ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
• ನೀವು unoptimized ಎಂದು ಗುರುತಿಸುವ ಚಿತ್ರಗಳು ಅವುಗಳ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಈಗಾಗಲೇ ಸರಿಯಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್: ತಮ್ಮ ಕೆಲಸವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಛಾಯಾಗ್ರಾಹಕರಿಗಾಗಿ ಒಂದು ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಅವರು ನಿರ್ದಿಷ್ಟ ಬಣ್ಣದ ಪ್ರೊಫೈಲ್‌ಗಳಲ್ಲಿ ಅಥವಾ ನಿಖರವಾದ ಸೆಟ್ಟಿಂಗ್‌ಗಳೊಂದಿಗೆ ಚಿತ್ರಗಳನ್ನು ನೀಡಲು ಆದ್ಯತೆ ನೀಡಬಹುದು, ಅದನ್ನು Next.js ಆಪ್ಟಿಮೈಜರ್ ಬದಲಾಯಿಸಬಹುದು. unoptimized ಅನ್ನು ಬಳಸುವುದು ಅವರಿಗೆ ತಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಉದ್ದೇಶಿಸಿದಂತೆ ನೀಡುವ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.

7. ಸುಧಾರಿತ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ `blurDataURL` ಅನ್ನು ಬಳಸುವುದು

blurDataURL ಪ್ರಾಪ್ ನಿಜವಾದ ಚಿತ್ರವು ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ಕಡಿಮೆ-ರೆಸಲ್ಯೂಶನ್ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಚಿತ್ರವನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಏನಾದರೂ ಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂಬ ದೃಶ್ಯ ಸುಳಿವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರರ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು, ಪುಟವು ಖಾಲಿಯಾಗಿ ಅಥವಾ ಸ್ಪಂದಿಸದಂತೆ ಕಾಣುವುದನ್ನು ತಡೆಯುತ್ತದೆ. Next.js 13 ಮತ್ತು ನಂತರದ ಆವೃತ್ತಿಗಳು ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ.

ಉದಾಹರಣೆ:

ಮೊದಲು, ನಿಮ್ಮ ಚಿತ್ರದಿಂದ BlurHash ಅಥವಾ ಅಂತಹುದೇ ಸೇವೆಯಂತಹ ಉಪಕರಣವನ್ನು ಬಳಸಿ ಬ್ಲರ್ ಡೇಟಾ URL ಅನ್ನು ರಚಿಸಿ. ಇದು ನಿಮ್ಮ ಚಿತ್ರದ ಮಸುಕಾದ ಆವೃತ್ತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಸಣ್ಣ, base64-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ನಿಮಗೆ ನೀಡುತ್ತದೆ.

<Image
  src="/my-image.jpg"
  alt="My Image"
  width={600}
  height={400}
  placeholder="blur"
  blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
/>

ಪ್ರಯೋಜನಗಳು:

• ಸುಧಾರಿತ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆ: ಏನಾದರೂ ಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂಬ ದೃಶ್ಯ ಸುಳಿವನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ವರ್ಧಿತ ಬಳಕೆದಾರ ಅನುಭವ: ಪುಟವು ಖಾಲಿಯಾಗಿ ಅಥವಾ ಸ್ಪಂದಿಸದಂತೆ ಕಾಣುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
• ಲೇಔಟ್ ಶಿಫ್ಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ: ಚಿತ್ರಕ್ಕಾಗಿ ಸ್ಥಳವನ್ನು ಕಾಯ್ದಿರಿಸುವ ಮೂಲಕ ಲೇಔಟ್ ಶಿಫ್ಟ್ ಅನ್ನು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್: ಅದ್ಭುತ ಛಾಯಾಗ್ರಹಣದೊಂದಿಗೆ ಗಮ್ಯಸ್ಥಾನಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಅಂತರರಾಷ್ಟ್ರೀಯ ಪ್ರಯಾಣ ಬ್ಲಾಗ್. blurDataURL ಅನ್ನು ಬಳಸುವುದು ನಿಧಾನವಾದ ನೆಟ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿರುವ ಬಳಕೆದಾರರಿಗೂ ಸಹ ಸುಗಮ ಲೋಡಿಂಗ್ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಸಕಾರಾತ್ಮಕ ಮೊದಲ ಪ್ರಭಾವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ ಮತ್ತು ವಿಷಯವನ್ನು ಅನ್ವೇಷಿಸಲು ಅವರನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ.

ಜಾಗತಿಕ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅತ್ಯುತ್ತಮ ಇಮೇಜ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ಸರಿಯಾದ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಆರಿಸಿ: ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ WebP ಅಥವಾ AVIF ಬಳಸಿ ಮತ್ತು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸಿ.
• ಇಮೇಜ್ ಗಾತ್ರವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ಗುರಿ ಪ್ರದರ್ಶನ ಗಾತ್ರಕ್ಕೆ ಸೂಕ್ತವಾದ ಆಯಾಮಗಳಿಗೆ ಚಿತ್ರಗಳನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿ.
• ಚಿತ್ರಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸಿ: ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಷ್ಟರಹಿತ ಅಥವಾ ನಷ್ಟಯುಕ್ತ ಸಂಕೋಚನವನ್ನು ಬಳಸಿ.
• ಲೇಜಿ ಲೋಡಿಂಗ್ ಬಳಸಿ: ಚಿತ್ರಗಳು ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಪ್ರವೇಶಿಸಿದಾಗ ಮಾತ್ರ ಅವುಗಳನ್ನು ಲೋಡ್ ಮಾಡಿ.
• ನಿರ್ಣಾಯಕ ಚಿತ್ರಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ: ಆರಂಭಿಕ ಪೇಜ್ ಲೋಡ್‌ಗೆ ನಿರ್ಣಾಯಕವಾದ ಚಿತ್ರಗಳನ್ನು ಪ್ರಿಲೋಡ್ ಮಾಡಿ.
• CDN ಅನ್ನು ಬಳಸಿ: ಬಳಕೆದಾರರಿಗೆ ಹತ್ತಿರವಿರುವ ಸರ್ವರ್‌ಗಳಿಂದ ಚಿತ್ರಗಳನ್ನು ನೀಡಲು CDN ಬಳಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: Google PageSpeed Insights ಮತ್ತು WebPageTest ನಂತಹ ಉಪಕರಣಗಳನ್ನು ಬಳಸಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿಯಮಿತವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ.

ತೀರ್ಮಾನ

Next.js ಇಮೇಜ್ ಕಾಂಪೊನೆಂಟ್ ವೆಬ್‌ಗಾಗಿ ಚಿತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಪ್ರಬಲ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅದರ ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ವೇಗವಾದ ಲೋಡಿಂಗ್ ಸಮಯ, ಕಡಿಮೆ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆ, ಮತ್ತು ನಿಮ್ಮ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಒಟ್ಟಾರೆ ಸುಧಾರಿತ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ನೀಡಬಹುದು. sizes ಪ್ರಾಪ್ ಅನ್ನು ಬಳಸುವುದು ಮತ್ತು priority ಅನ್ನು ಬಳಸುವುದರಿಂದ ಹಿಡಿದು ಕಸ್ಟಮ್ ಲೋಡರ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು ಮತ್ತು ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವವರೆಗೆ, ಈ ಮಾರ್ಗದರ್ಶಿಯು ಯಾವುದೇ ಸಾಧನದಲ್ಲಿ ಮತ್ತು ಯಾವುದೇ ಸ್ಥಳದಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ನಿಜವಾದ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿದ ಚಿತ್ರಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಬೇಕಾದ ಜ್ಞಾನ ಮತ್ತು ಸಾಧನಗಳನ್ನು ಒದಗಿಸಿದೆ.

ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿರಂತರವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಸಾಧ್ಯವಾದಷ್ಟು ಉತ್ತಮ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಅಗತ್ಯವಿರುವಂತೆ ಹೊಂದಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ.